<html>
	<head>
		<title>Persevere Examples</title>
		<script src="js/persevere.js"></script> <!-- include the persistence framework -->
		<link rel="stylesheet" type="text/css" href="examples/examples.css"/>
	</head>
	<body>
		<h1>Persevere Examples</h1>
		These examples are intended to demonstrate how to use Persevere in compiled Persistent JavaScript mode with autosave and auto-lazy loading support. 
		These examples should work as is
		if you have download and installed the <a href="http://www.xucia.com/page/Jsponic">Jsponic server</a>.
		<h1>Customers Example</h1>
		<a href="#" onclick="renderCustomers()">List Customers</a>
		<div id="customersDiv"></div> <!-- we render the customers in this div -->
		<div id="customerFields" style="display:none">
			<fieldset>
				<legend>Edit the customer</legend>
				<div><label for="firstName">First Name:</label><input type="text" name="firstName" /></div>
				<div><label for="lastName">Last Name:</label><input type="text" name="lastName" /></div>
				<div><label for="address">Address:</label><input type="text" name="address" /></div>
				<div><label for="phoneNumber">Phone Number:</label><input type="text" name="phoneNumber" /></div>
				<div><label for="comment">Comment:</label><input type="text" name="comment" /></div>
				<button id="customerOk">OK</button>
				<button id="customerDelete">Delete</button>
			</fieldset>
		</div>
		<button onclick="addCustomer()">Add new customer</button>
		<script>
			persevere.precompiled=true;
			persevere.loadScript("examples/customers.pjs");
		</script>


		<h1>Blog Example</h1>
		<a href="#" onclick="renderBlog()">Display Blog Posts</a>
		<div id="blogDiv"></div> <!-- we render the blog in this div -->
		<div id="newComment" style="display:none">
			<h3>Enter a new comment</h3>
			<div>
				Author:<input type="text" id="newCommentAuthor" />
			</div>
			<div>
				Comment:<textarea id="newCommentContent"></textarea>
			</div>
			<button onclick="addCommentEntry()">Submit Comment</button>
		</div>
		<a href="#" onclick="var style = document.getElementById('newPost').style; style.display=style.display=='block'?'none':'block'">New Post</a>
		<div id="newPost" style="display:none">
			<h3>Enter a new post</h3>
			<div>
				Content:<textarea id="newPostContent">new post</textarea>
			</div>
			<button onclick="addBlogPost()">Post</button>
		</div>
		<script>
			persevere.loadScript("examples/blog.pjs");
		</script>		
	</body>
</html>